<template>
    <div class="header">
        <div class="logo">
            <div v-if="!collapse" style="width:250px;">
                <router-link to="/home"><img src="../../assets/img/logo.png" style="height:70px;width:250px;" ></img></router-link>
            </div>
            <div v-else style="width:64px">
                <router-link to="/home"><img src="../../assets/img/logo-min.png" style="height:70px;"></img></router-link>
            </div>
        </div>
        <!-- 折叠按钮 -->
        <div class="collapse-btn" @click="collapseChage">
            <i v-if="!collapse" class="el-icon-s-fold"></i>
            <i v-else class="el-icon-s-unfold"></i>
        </div>
		<div class="systemtab" :class="{ active:index==isActive }" v-for="(item,index) in apps" :key="index" @click="handleTabs(index)">
			{{item.appName}}
		</div>
        <div class="header-right">
            <div class="header-user-con">
				<div>
				 <!-- <el-dropdown @command="changeApp">
					   <span class="el-dropdown-link">
						   切换应用<i class="el-icon-arrow-down el-icon--right"></i>
					   </span>
					   <el-dropdown-menu slot="dropdown">
							<el-dropdown-item v-for="item in apps" divided  :command="item"  :key="item.id">{{item.appName}}</el-dropdown-item>
					   </el-dropdown-menu>
					   </el-dropdown> -->
			    </div>
                <div class="btn-fullscreen" @click="handleSystem" v-if="systemSetupShow">
                    <i class="el-icon-s-tools"></i>
                    系统设置
                </div>
                <!-- 消息中心 -->
                <div class="btn-bell" style="width: 60px">
                    <el-badge class="item">
                        <span class="hot">{{this.$store.state.num}}</span>
                        <router-link to="/message">
                            消息
                        </router-link>
                    </el-badge>

                </div>
                <!-- 用户头像 -->
                <div class="user-avator">
                    <img v-if="headImg" :src="headImg" alt="">
                    <span v-else>{{usernameImg}}</span>
                </div>
                <!-- 用户名下拉菜单 -->
                <el-dropdown class="user-name" trigger="click" @command="handleCommand">
                    <span class="el-dropdown-link">
                        {{username}}
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item  command="goone">个人中心</el-dropdown-item>
                        <el-dropdown-item divided command="loginout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>
    </div>
</template>
<script>
import bus from '../common/bus';
import {message_getmessage} from "@/request/api"
export default {
    inject: ['reload'],
    data() {
        return {
			isActive:false,
			systemSetupShow:true,
            collapse: false,
            fullscreen: false,
            name: 'linxin',
            message: 2,
            usernameImg: '',
            num:0,
            headImg:'',
            apps:[],
			configMenus:[],
			appId:{appId:''}
        };
    },
    computed: {
        username() {
			var _this = this
            let username = localStorage.getItem('ms_username');
            _this.usernameImg = username.substring(0,1)
            return username ? username : this.name;
        }
    },
    methods: {
		handleTabs(index){
			sessionStorage.setItem('setTabStatus',"sss")
			this.isActive = index
			let val = this.apps[index]
			localStorage.setItem("requestUrl",val.appUrl)
			this.configMenus = val.configMenus
			bus.$emit("changeApp",val)
			this.appId.appId = val.appId
			
			if(val.configMenus.length == 0){
				this.systemSetupShow = false
			}else{
				this.systemSetupShow = true	
			}
			var type = sessionStorage.getItem("setTabStatus")
	
			if(type == "sss"){
				
			}else{
				this.reload()
			}
			
		},
        // init(){
        //     message_getmessage("").then((res)=>{
        //         this.$store.commit("setnum",res.data)
        //     })
        // },
        // goone(){
        //     
        //     this.$router.push('/personage')
        // },
        // handlesys(goone){
        //   
        //     this.$router.push('/personage')
        // },

        // 用户名下拉菜单选择事件
        handleCommand(command) {
            if (command == 'loginout') {
                localStorage.removeItem('ms_username');
				sessionStorage.removeItem("token")
				localStorage.clear()
                this.$router.push('/login');
            }
            if(command == "goone") {
                localStorage.setItem("ide","zxc")
                this.reload();
                this.$router.push('/personal')
            }
        },
    //更改app

        // 侧边栏折叠
        collapseChage() {
            this.collapse = !this.collapse;
            bus.$emit('collapse', this.collapse);
        },
        // 点击前往系统设置
        handleSystem(){
			var val = this.appId
			// console.log(val)
			sessionStorage.setItem('setTabStatus',"123")
			// this.$store.commit('setTabStatus',"ss")
			bus.$emit('changeApp', val);
			
			localStorage.setItem("type","1")
            if(this.configMenus.length == 0){
                this.$router.push({
                    path:'/system403'
                })
            }else{
				
                // this.$router.push({
                //     path:this.configMenus[0].router
                // })
            }
            
        },
    },
    mounted() {
		
		 var show = localStorage.getItem("system")
		if(show == "show"){
			 this.systemSetupShow = true
		 }else{
			 this.systemSetupShow = false
		 }
        if (document.body.clientWidth < 1200) {
            this.collapseChage();
        }
        if(localStorage.getItem('headImg')){
            this.headImg = this.$store.state.imageUrls + localStorage.getItem('headImg')
        }
		if(this.$util.get("userInfo").appMenus == null || this.$util.get("userInfo").appMenus == ""){
			
		}else{
			let appMenus = this.$util.get("userInfo").appMenus;
			if(appMenus && appMenus.length>0){
				if(appMenus!=null && appMenus.length>0){
					for(var i=0;i<appMenus.length;i++){
						this.apps.push(appMenus[i]);
					}
				}
			}
		}
        
    },
	created(){
		this.configMenus = JSON.parse(sessionStorage.getItem('permission'))
	}
};
</script>
<style scoped>
	.active{
		color:	#5555FF ;
	}
.header {
    position: relative;
    box-sizing: border-box;
    /* width: 100%; */
    /* min-width:1200px; */
    height: 70px;
    font-size: 22px;
}
.systemtab{
	line-height:70px;
	display: inline-block;
	margin-left:30px;
	cursor: pointer;
}
.collapse-btn {
    float: left;
    padding: 0 21px;
    cursor: pointer;
    line-height: 70px;
}
.collapse-btn:hover{
    background: #eee;
}
.header .logo {
    float: left;
    height: 100%;
    line-height: 4;
    text-align: center;
}
.header .menuTop{
    float: left;
}
.header .menuTop ul li{
    float: left;
    padding-left: 15px;
    line-height: 70px;
    font-size: 14px;
}
.header-right {
    float: right;
    padding-right: 50px;
}
.header-user-con {
    display: flex;
    height: 70px;
    align-items: center;
}
.btn-fullscreen {
    /* transform: rotate(45deg); */
    margin-right: 5px;
    font-size: 13px;
}
.btn-bell,
.btn-fullscreen {
    position: relative;
    width: 80px;
    /* height: 30px; */
    line-height: 10px;
    text-align: center;
    border-radius: 15px;
    cursor: pointer;
}
.btn-bell-badge {
    position: absolute;
    right: 0;
    top: -2px;
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background: #f56c6c;
    color: #fff;
}
.btn-bell .el-icon-bell {
    color: #000;
}
.btn-bell a{
    font-size: 13px;
    color: #000;
}
.btn-bell .item .hot{
    background-color: #F56C6C;
    border-radius: 10px;
    color: #FFF;
    display: inline-block;
    font-size: 12px;
    height: 18px;
    line-height: 18px;
    padding: 0 6px;
    text-align: center;
    white-space: nowrap;
}
.user-name {
    margin-left: 10px;
}
.user-avator {
    display: block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    background:#909399;
    color: #fff;
    border-radius: 50%;
    text-align: center;
    margin-left: 10px;
    font-size: 14px;
}
.user-avator img {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
}
.el-dropdown-link {
    cursor: pointer;
}
.el-dropdown-menu__item {
    text-align: center;
}
</style>
